<script setup lang="ts">
import type {
  KnowledgeType,
  KnowledgeList,
  KnowledgeParams
} from '@/types/consult'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgeList } from '@/services/consult'

import { ref } from 'vue'
const props = defineProps<{
  type: KnowledgeType
}>()

const list = ref<KnowledgeList>([])
const loading = ref(false) // 控制list组件的内容是否在加载中的状态，true加载中，false是没有加载
const finished = ref(false) // 控制list组件的所有的内容是否加载完成的状态，true所有数据加载完成， false数据没有加载完成

const PageParams = ref<KnowledgeParams>({
  type: props.type,
  pageSize: 10,
  current: 1
})

// load事件对应的回调函数
//  loading 只要load事件一触发，那么会自动将loading的状态设置为true，只要loading的状态是true，那么就不会再触发load
// finished 数据加载完毕设置为true，只要 finised是true，那么就不再触发load事件
const onLoad = async () => {
  // // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1)
  //   }
  //   // 加载状态结束
  //   loading.value = false
  //   // 数据全部加载完成
  //   if (list.value.length >= 40) {
  //     finished.value = true
  //   }
  // }, 1000)
  const res = await getKnowledgeList(PageParams.value)
  list.value.push(...res.data.rows)
  // 判断数据是否加载完成，响应数据总的页码值 pageTotal < current 当前页
  if (res.data.pageTotal > PageParams.value.current) {
    PageParams.value.current++
  } else {
    // 所有的数据加载完毕，finished=true，不再触发load事件
    finished.value = true
  }
  console.log(res, 'res')
  // 每一次数据加载完毕，一定要将loading设置为false，目的是为了下一次翻页
  loading.value = false
}
</script>

<template>
  <!-- 
    List 组件通过 loading 和 finished 两个变量控制加载状态，
    load事件触发的时机
      - 页面一打开，就会自动触发load事件，当list容器的内容能够填满浏览器的可视区域，不再执行load事件
      - 当组件滚动到底部时，会触发 load事件 并自动将loading 设置成 true。  此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
    若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
   -->
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <knowledge-card
        v-for="item in list"
        :key="item.id"
        :item="item"
      ></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
